<template>
<div class="account-box">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/loginRedirect' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>账号管理</el-breadcrumb-item>
        <el-breadcrumb-item>账号分配</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :model="accountData" inline :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm m1-b">
        <el-form-item label="员工账号" prop="userAccount">
            <el-input v-model="accountData.userAccount"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
            <el-input v-model="accountData.password"></el-input>
        </el-form-item>
        <el-form-item label="人员姓名" prop="staffName">
            <el-input v-model="accountData.staffName"></el-input>
        </el-form-item>
        <el-form-item label="人员年龄" prop="staffAge">
            <el-input v-model="accountData.staffAge"></el-input>
        </el-form-item>
        <el-form-item label="人员性别" prop="staffSex">
            <el-select v-model="accountData.staffSex" placeholder="请选择人员性别" style="width:186%">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="staffDate">
            <el-date-picker
                type="datetime"
                v-model="accountData.staffDate"
                placeholder="出生日期"
                style="width: 175%"
                value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
        </el-form-item>
        <el-form-item label="人员地址" prop="staffAddress">
            <el-input v-model="accountData.staffAddress"></el-input>
        </el-form-item>
        <el-form-item label="员工电话" prop="staffTel">
            <el-input v-model="accountData.staffTel"></el-input>
        </el-form-item>
        <el-form-item label="员工薪资" prop="staffSal">
            <el-input v-model="accountData.staffSal"></el-input>
        </el-form-item>
        <el-form-item label="入职时间" prop="shireDate">
            <el-date-picker
                type="datetime"
                v-model="accountData.shireDate"
                placeholder="入职日期"
                style="width: 175%"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-ddTHH:mm:ss"
                readonly
            ></el-date-picker>
        </el-form-item>
        <el-form-item label="员工职位" prop="jobId">
            <el-select v-model="accountData.jobId" placeholder="请选择人员职位" style="width:186%">
                <el-option v-for="(item,index) in JobData" :label="item.roleName" :value="item.roleId" :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="所属部门" prop="deptId">
            <el-select v-model="accountData.deptId" placeholder="请选择所属部门" style="width:186%">
                <el-option v-for="(item,index) in DeptData" :label="item.deptName" :value="item.deptId" :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item class="btn-1">
            <el-button type="primary" @click="createAccount('ruleForm')">点击分配</el-button>
            <el-button type="warning" @click="resetForm('ruleForm')">数据重置</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
export default {
    data(){
        return{
            accountData:{
                userAccount:"",
                password:"",
                staffName:"",
                staffAge:"",
                staffSex:"",
                staffDate:"",
                staffAddress:"",
                staffTel:"",
                staffSal:"",
                shireDate:new Date(),
                jobId:"",
                deptId:""
            },
            JobData:[],
            DeptData:[],
            deptPage:{
                page:1,
                size:10000,
                deptName:''
            },
            // 规则校验
            rules: {
                userAccount: [
                    { required: true, message: '请输入登录账户', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 5 到 10 个字符,包括字母,数字,特殊字符(- , _ , $ ,)', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入账户密码', trigger: 'blur' },
                    { min: 5, max: 10, message: '长度在 5 到 10 个字符,包括字母,数字,符号', trigger: 'blur' }
                ],
                staffName: [
                    { required: true, message: '请输入人员姓名', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                staffAge: [
                    { required: true, message: '请输入人员年龄', trigger: 'blur' }
                ],
                staffSex: [
                    { required: true, message: '请选择人员性别', trigger: 'blur' }
                ],
                staffDate: [
                    { required: true, message: '出生日期不能为空', trigger: 'blur' }
                ],
                staffAddress: [
                    { required: true, message: '人员地址不能为空', trigger: 'blur' }
                ],
                staffTel: [
                    { required: true, message: '人员电话不能为空', trigger: 'blur' }
                ],
                staffSal: [
                    { required: true, message: '薪资标准不能为空', trigger: 'blur' }
                ],
                shireDate: [
                    { required: true, message: '入职时间不能为空', trigger: 'blur' }
                ],
                jobId: [
                    { required: true, message: '请选择员工职位', trigger: 'blur' }
                ],
                deptId:[
                    { required: true, message: '请选择员工部门', trigger: 'blur' }
                ]
            }
        }
    },
    created(){
        this.getJobData();
        this.getDeptData();
    },
    methods:{
        // 获取职位信息
        getJobData(){
            this.$http.get(`/job/queryJobByPage/1/10000?jobName=`).then((result)=>{
                // console.log(result);
                if(result.code === 200){
                    this.JobData = result.data.jobList;
                }else{
                    this.$message.error("系统错误,请联系管理员!!!");
                }
            }).catch((err)=>{
                console.log(err);
                this.$message.error("系统错误,请联系管理员!!!");
            });
        },
        // 获取部门信息
        getDeptData(){
            this.$http.post(`/deptInfo/getDeptInfo`,this.deptPage).then((result)=>{
                // console.log(result);
                if(result.code === 200){
                    this.DeptData = result.data.deptList;
                    this.totals = result.data.totals - 0;
                }else{
                    this.$message.error("系统错误,请联系管理员!!!");
                }
            }).catch((err)=>{
                console.log(err);
                this.$message.error("系统错误,请联系管理员!!!");
            });
        },
        // 创建账户
        createAccount(accountForm){
            this.$refs[accountForm].validate((valid) => {
                if (valid) {
                    this.$http.post("/user/userAccountAssignment",this.accountData).then((res)=>{
                        if(res.data){
                            this.$message.success("用户【" + this.accountData.userAccount + "】创建成功");
                            this.accountData={};
                        }else{
                            this.$message.error("创建失败");
                        }
                    }).catch((err)=>{
                        console.log(err);
                        this.$message.error("创建失败");
                    });
                    
                } else {
                    this.$message.warning("请输入表单必填项");
                    return false;
                }
            });
        },
        // 表单重置
        resetForm(accountForm) {
            this.$refs[accountForm].resetFields();
        }
    }
}
</script>

<style scoped>
.m1-b{
    margin: 5% 10% 0 10%;
}
.el-form-item{
    width:45%;
    height: 60px;
}
.el-form-item .el-input{
    width: 200%;
}
.btn-1{
    margin-left: 30%;
}

</style>
